<template>
  <div class="timeLineContent">
    <el-date-picker
      v-model="selectDateTime"
      class="selector"
      type="datetimerange"
      popper-class="oneMonthSelector"
      value-format="yyyy-MM-dd HH:mm:ss"
      start-placeholder="选择开始时间"
      end-placeholder="选择结束时间"
      style="width: 300px;height:40px"
      @change="SelectTimeChange"
    />
    <!-- <el-date-picker
      class="selector"
      v-model="selectDateTime"
      type="datetime"
      @change="SelectTimeChange"
      placeholder="选择日期时间" style="width: 200px;">
    </el-date-picker> -->
    <template>
      <el-input-number v-model="num" style="bottom: 100px;left:400px" :step="1" :max="3" :min="1" @change="speedChange" />
    </template>
    <div class="timeLine">
      <el-row class="timeLine_row">
        <el-col :span="3">
          <div class="play">
            <i
              :title="
                nextStatus === 'play'
                  ? '播放'
                  : nextStatus === 'pause'
                    ? '暂停'
                    : ''
              "
              :class="
                nextStatus === 'play'
                  ? 'el-icon-video-play'
                  : nextStatus === 'pause'
                    ? 'el-icon-video-pause'
                    : ''
              "
              @click="onTimeControlClick(nextStatus)"
            />
          </div>
        </el-col>
        <el-col :span="13" class="slider__tooltip_content">
          <div class="my-slider__tooltip" :style="style">
            <el-button class="my-slider__tooltip-wrapper" size="mini">
              {{ timeDataArray[timeControlLayerIndex] }}
            </el-button>
          </div>
          <el-slider
            v-model="timeControlLayerIndex"
            :show-stops="true"
            :show-tooltip="false"
            :min="min"
            :max="max"
            @change="onTimeControlChange"
          /></el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { getFormatDate, getFormatHourMinute, getFormatDateTime, getFormatDateTime_2 } from '@/utils/datetime'
import { startPlayBack, pausePlayBack, endPlayBack, endpausePlayBack, updateSpeed } from '@/api/playback'
export default {
  props: ['showLayers'],
  data() {
    return {
      maxDate: null,
      minDate: null,

		  timeDataArray: [],
      selectDateTime: '',
      pauseState: 0,
      nextStatus: 'play',
      playBackId: '',
      isClockActive: false,
      timeControlLayerIndex: 0, // 当前索引
      timeControlPauseTime: 2, // 播放时间间隔，秒
      playSpeed: 1000,
      min: 0,
      max: 3600,
      num: 1
    }
  },
  computed: {

    style() {
      const length = this.max - this.min
      const progress = this.timeControlLayerIndex - this.min
      const left = (progress / length) * 100
      // console.log(length, progress, left)
      return {
        paddingLeft: `${left}%`
      }
    }
  },
  watch: {
    value(newValue) {
      this.timeControlLayerIndex = newValue
    }
  },

  mounted() {
    for (var i = 0; i < 3600; i++) {
      var datetime = '2022-05-03 05:' + (i - i % 60) / 60 + ':' + i % 60
      this.timeDataArray.push(datetime)
    }
  },
  destroyed: function() {
    this.isClockActive = false
  },
  methods: {
    syncPlayBackTime(datetime) {
      this.timeControlLayerIndex = (new Date(datetime).getTime() - new Date(this.selectDateTime[0]).getTime()) / 1000
    },
    speedChange() {
      updateSpeed(this.playBackId, this.num)
    },
    updatePlayBackId() {
      this.playBackId = this.$parent.$parent.playBackId
      // console.log(this.$parent.$parent.playBackId)
      // console.log('dayin' + this.playBackId)
    },
    SelectTimeChange() {
      // console.log(new Date(this.selectDateTime[1]).getTime() - new Date(this.selectDateTime[0]).getTime())
      if ((new Date(this.selectDateTime[1]).getTime() - new Date(this.selectDateTime[0]).getTime()) > 1000 * 60 * 60) {
        this.$message('时间范围不能超过一个小时')
        this.selectDateTime = ''
      } else {
        endPlayBack(this.playBackId).then(response => {
          this.$parent.$parent.clearData()
          var timerange = (new Date(this.selectDateTime[1]).getTime() - new Date(this.selectDateTime[0]).getTime()) / 1000
          // console.log(this.selectDateTime[0])
          // console.log(new Date(this.selectDateTime).getHours())
          // 发送结束请求
          this.timeDataArray = []
          var hour = new Date(this.selectDateTime[0]).getHours()
          var minute = new Date(this.selectDateTime[0]).getMinutes()
          var second = new Date(this.selectDateTime[0]).getSeconds()
          var hour2 = new Date(this.selectDateTime[1]).getHours()
          var minSec = minute * 60 + second
          this.max = timerange
          hour = hour < 10 ? '0' + hour : hour
          hour2 = hour2 < 10 ? '0' + hour2 : hour2
          for (var i = minSec; i < timerange + minSec + 1; i++) {
            minute = (i - i % 60) / 60
            if (minute >= 60) {
              minute -= 60
              second = i % 60
              minute = minute < 10 ? '0' + minute : minute
              second = second < 10 ? '0' + second : second
              var datetime = (getFormatDate(new Date(this.selectDateTime[1]))) + ' ' + hour2 + ':' + minute + ':' + second
            } else {
              minute = minute < 10 ? '0' + minute : minute
              second = i % 60
              second = second < 10 ? '0' + second : second
              var datetime = (getFormatDate(new Date(this.selectDateTime[0]))) + ' ' + hour + ':' + minute + ':' + second
            }
            this.timeDataArray.push(datetime)
          }
          // this.timeControlLayerIndex=new Date(this.selectDateTime).getMinutes()*60+new Date(this.selectDateTime).getSeconds()
          this.timeControlLayerIndex = 0
          // if(this.nextStatus=='pause')
          this.nextStatus = 'play'
          this.isClockActive = false
          this.pauseState = 0
          // this.selectDateTime=''
        })
      }
    },
    onTimeControlClick(value) {
      switch (value) {
        case 'play':
          // console.log(this.timeDataArray[this.timeControlLayerIndex])
          if (this.pauseState) { endpausePlayBack(this.playBackId) } // 发送暂停结束请求
          else {
            startPlayBack(this.timeDataArray[this.timeControlLayerIndex], this.selectDateTime[0], this.selectDateTime[1], this.playBackId) // 发送重新开始请求
            this.$parent.$parent.onGoingTaskState = 1
          }
          if (this.isClockActive) {
            this.$message('正在播放中')
          } else {
            this.isClockActive = true
            this.nextStatus = 'pause'
            // 播放轮播
            this.timeClockTick()
          }
          break
        case 'pause':
          this.pauseState = 1 // 发送暂停请求
          pausePlayBack(this.playBackId)
          this.isClockActive = false
          this.nextStatus = 'play'
          break
        default:
          break
      }
    },
    timeClockTick() {
      if (!this.isClockActive) {
        return
      }
      this.showNextTimeLayer()
      setTimeout(
        this.timeClockTick,
        this.timeControlPauseTime * this.playSpeed
      ) // time是指本身,延时递归调用自己,100为间隔调用时间,单位毫秒
    },
    showNextTimeLayer() {
      let timeControlLayerIndex = this.timeControlLayerIndex
      const timeDataArray = this.timeDataArray
      // timeControlLayerIndex++;
      if (timeControlLayerIndex >= timeDataArray.length) {
        timeControlLayerIndex = 0
      }
      this.timeControlLayerIndex = timeControlLayerIndex
      this.$emit('showLayers', this.timeDataArray[timeControlLayerIndex])
    },
    onTimeControlChange(value) {
      this.timeControlLayerIndex = value

      endPlayBack(this.playBackId).then(response => {
        this.$parent.$parent.clearData() // 清空数据
        this.nextStatus = 'play'
        // 发送结束请求
        this.pauseState = 0
        this.isClockActive = false
      })

      this.$emit('showLayers', this.timeDataArray[value])
    },
    timestepToolTip(index) {
      return this.timeDataArray[index]
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.timeLineContent {
  position: absolute;
  bottom: 0px;
  right:400px;
  .my-slider__tooltip {
    text-align: left;
    .my-slider__tooltip-wrapper {
      height: 32px;
      transform: translateX(-50%);
      top: -50%;
      background: rgba(0, 0, 0, 0.75);
      border-radius: 4px;
      color: #fff;
      padding: 6px 8px;
      border: none;
      outline: none;
      margin-bottom: 7px;
      &::after {
        position: absolute;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-top: 9px solid rgba(0, 0, 0, 0.75);
        content: " ";
        display: block;
        width: 0;
        height: 0;
        bottom: -8px;
        left: 46px;
        pointer-events: auto;
      }
    }
  }
  .slider__tooltip_content {
    position: absolute;
    left: 89px;
    top: -39px;
    padding-right: 20px;
  }
  .el-slider__stop {
    margin-top: -1px;
  }
  .timeLine_row {
    margin-top: 15px;
  }
  .el-slider__runway {
    height: 4px;
  }
  .el-slider__button {
    width: 12px;
    height: 12px;
  }
}
.selector {
  position: fixed;
  bottom: 100px;
  left: 80px;
  width: 70px;
  height: 65px;
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.timeLine {
  position: fixed;
  bottom: 10px;
  left: 50px;
  width: 700px;
  height: 65px;
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .play {
    text-align: center;
    background: #fff;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border-radius: 50%;
    i {
      font-size: 36px;
      margin: "auto";
      color: #0e6cac;
    }
  }
}
</style>


<style>
.oneMonthSelector .el-picker-panel__content.el-date-range-picker__content.is-right .el-date-table,
.oneMonthSelector .el-picker-panel__content.el-date-range-picker__content.is-right
  .el-date-range-picker__header
  div {
  display: none;
}
.oneMonthSelector .el-picker-panel__content.el-date-range-picker__content.is-right
  .el-date-range-picker__header {
  width: 60px;
  top: -331px;
  left: 530px;
}
/* 设置整体日期面板的宽度 */
.oneMonthSelector .el-picker-panel.el-date-range-picker.el-popper {
  width: 522px;
}
.oneMonthSelector .el-date-range-picker__content.is-left {
  border-right: none;
}
.oneMonthSelector .el-picker-panel__content {
  width: 100% !important;
}
</style>